<template>
  <div class="list-container">
    <el-form class="search-panel" v-model="formData" :inline="true">
<!--      <el-form-item-->
<!--        label-width="100px"-->
<!--        class="search-time"-->
<!--        label="考勤时间："-->
<!--        prop="time"-->
<!--      >-->
<!--        <el-date-picker-->
<!--          v-model="formData.date"-->
<!--          style="width: 250px"-->
<!--          type="month"-->
<!--          value-format="yyyy-MM"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label-width="120px" label="审核状态：">-->
<!--        <el-select v-model="formData.status" placeholder="请选择">-->
<!--          <el-option-->
<!--            v-for="item in statusOptions"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->

      <el-form-item >
<!--        <el-button type="primary" @click="onSubmit">查询</el-button>-->
        <el-button
          @click.native.prevent="removeRows()"
          type="primary"
        >批量审批</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          align="center"
        />
        <el-table-column type="index" align="center" width="55" label="序号"/>
        <el-table-column prop="attendanceTime" label="考勤时间" align="center"/>
        <el-table-column prop="personName" label="工人姓名" align="center"/>
        <el-table-column prop="attendanceDays" label="总出勤" align="center"/>
        <el-table-column prop="referenceMonthlyWage" label="参考工资" align="center">
          <template slot-scope="scope">
            <div>￥{{ scope.row.referenceMonthlyWage }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="actualMonthlyWage" label="实际工资" align="center">
          <template slot-scope="scope">
            <div>￥{{ scope.row.actualMonthlyWage }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="bonus" label="奖金" align="center">
          <template slot-scope="scope">
            <div>￥{{ scope.row.bonus }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="bonus" label="罚款" align="center">
          <template slot-scope="scope">
            <div>￥{{ scope.row.bonus }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="审核状态" align="center"/>
        <el-table-column min-width="150" fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-search"
              @click.native.prevent="checkRow(scope)"
            >查看</el-button>
            <el-button
              type="text"
              icon="el-icon-circle-check"
              @click.native.prevent="confirmRow(scope)"
              :disabled="scope.row.canCheck==false"
            >审批</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="page">
        <!-- <div class="page-tag">
          共{{ Math.ceil(totalData / pageSize) }}页/{{ totalData }}条数据
        </div>
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          :total="totalData"
          background
          layout="sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination> -->
        <pagination
          background
          v-show="totalData>0"
          :total="totalData"
          :page.sync="params.pageNum"
          :limit.sync="params.pageSize"
          @pagination="getTableListExamineWorkflowApply"
        />
      </el-row>
    </div>
    <el-dialog
      class="small-dialog"
      width="600px"
      title="驳回月工资意见"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="dialogForm" style="text-align: center;">
        <el-form-item  label="驳回意见：">
          <el-input type="textarea" :rows="5" v-model="dialogForm.note"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import workflowApi from '@/api/workflow/workFlow'
export default {
  data() {
    return {
      formData: {
        date:null,
        status: -1,
      },
      statusOptions: [
        { value: -1, label: '全部' },
        { value: 0, label: '待提交' },
        { value: 1, label: '待审核' },
        { value: 2, label: '已审核' },
        { value: 3, label: '已驳回' }
      ],
      currentPage: 1,
      pageSize: 10,
      totalData: 0,
      tableData: [],
      params: {
        pageNum: 1,
        pageSize: 10,
        isAsc: 'desc'
      },
      workForm: {
        type: '',
        applyNodeId: '',
        examineReason: '',
        workflowNodeList: [],
        currentWorkflowNode: {}
      },
      workForms: [],
      dialogForm:{},
      dialogFormVisible:false,
      multipleSelection: [],
    }
  },
  created() {
    var dd = new Date()
    var y= dd.getFullYear()
    var m= dd.getMonth()+1
    this.formData.date=y+'-'+m
    this.getTableListExamineWorkflowApply()
  },
  methods: {

    removeRows() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: "warning",
          message: "请选择要提交的记录!",
        });
        return;
      }
      this.$confirm(
        "此操作将会整体审批多个人员的月工资状态, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
            const workForms = this.workForms
            this.multipleSelection.forEach((item) => {
              var examinePojo = {}
              examinePojo.type          = 1
              examinePojo.examineReason = "Yes"
              examinePojo.applyNodeId   = item.workflowCurrentApplyNodeId
              workForms.push(examinePojo);
            });
            // 调用api
            workflowApi
              .multipleExamineWorkflow(this.workForms)
              .then((res) => {
                this.$message({
                  type: "success",
                  message: "整体审批成功!",
                });
                window.location.reload()
              })
              .catch((res) => {
                this.$message({
                  type: "info111",
                  message: res,
                });
              });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    selectEnable(row) {
      console.log(row);
      if(row.status == '未提交' || row.status == '已驳回' || row.status == '已撤回'){
        return true;
      }else {
        return false
      }
    },
    getTableListExamineWorkflowApply() {
      workflowApi.getExamineListWorkflow(this.params).then(res => {
        let that = this
        console.log(res);
        console.log('getTableListExamineWorkflowApply',res)
        // this.totalData = res.count
        this.tableData = []
        this.totalData = 0
        res.data.forEach(function(item, index) {
          that.giveDataToTableData(item)
        })
      })
    },
    giveDataToTableData(item){
      if(item.canCheck){
        this.totalData++
        const tableData = this.tableData
        let data=item.attachInfo.split("*")
        let that = this
        tableData.push({attendanceTime:data[0],
          personId:item.personId,
          personName:data[1],
          attendanceDays:data[2],
          referenceMonthlyWage:data[3],
          actualMonthlyWage:data[4],
          bonus:data[5],
          fine:data[6],
          projectId:data[7],
          status:that.convertStatus(item.applyStatus),
          workflowApplyId:item.applyId,
          workflowCurrentApplyNodeId:item.currentWorkflowNode.applyNodeId
        })
      }
    },
    onSubmit() {
      // this.getTableListExamineWorkflowApply(this.params)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getStatisticList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getStatisticList()
    },
    handleSelectionChange(selection) {
      console.log("=====================selection")
      console.log(selection)
      this.multipleSelection = selection;
    },
    jump() {
      this.$router.push({ path: '/wage/month/list' })
    },
    convertStatus(status){
      let newStatus = "未知"
      switch (status){
        case '1': newStatus = "待审核";break;
        case '2': newStatus = "审核中";break;
        case '3': newStatus = "已审核";break;
        case '4': newStatus = "已驳回";break;
        case '5': newStatus = "已撤回";break;
      }
      return newStatus
    },
    checkRow(res) {
      console.log('approve',res)
      // this.$router.push('/wage/month/approveReviewDetail/'+res.row.workflowApplyId)
      this.$router.push({path:'/wage/month/listDetail',query:{personId:res.row.personId,workflowApplyId:res.row.workflowApplyId,date:res.row.attendanceTime}})
    },
    getWorkflowApplyInfo(workflowApplyId) {
      workflowApi.getWorkflowApplyInfo({applyId:workflowApplyId}).then(res => {
        this.workForm = res.data
        this.workForm.applyNodeId = res.data.currentWorkflowNode.applyNodeId
        this.workForm.type = 1
      })
    },
    confirmRow(scope){
      this.getWorkflowApplyInfo(scope.row.workflowApplyId)
      this.$confirm(
        "是否确认审批"+scope.row.attendanceTime+"月"+scope.row.personName+"的工资?",
        "月工资审批",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "确认",
          cancelButtonText: "驳回",
          type: "warning",
        }
      ).then(() => {
        // console.log('examineWorkflow提交的同意---------',this.workForm);
        workflowApi.examineWorkflow(this.workForm).then(res=>{
          this.$message({
            type: "success",
            message: "审批成功!",
          });
        this.getTableListExamineWorkflowApply()
        }).catch(res=>{
          console.log(res);
          this.$message({
            type: "info",
            message: "审批失败",
          });
        })
      })
      .catch(res => {
        console.log(res);
        if(res=='close'){//点叉叉
          // this.workForm={}
          this.$message({
            type: "info",
            message:'已取消审核'
          });
        }else{
          this.dialogFormVisible = true
        }
      });
    },
    confirmDialog(){
      this.workForm.type = 2
      this.workForm.examineReason = this.dialogForm.note
      // console.log('examineWorkflow提交的驳回---------',this.workForm);
      workflowApi.examineWorkflow(this.workForm).then(res=>{
        this.$message({
          type: "success",
          message: "驳回成功!",
        });
      this.$router.go(0)
      }).catch(res=>{
        console.log(res);
        this.$message({
          type: "info",
          message: "驳回失败",
        });
      })
    }
  }
}
</script>
